<template>
  <view class="container container18836">
    <view class="flex diygw-col-24 diygw-bottom">
      <view class="diygw-grid diygw-actions">
        <button class="diygw-action">
          <navigator url="../index/index" open-type="redirect" hover-class="other-navigator-hover">
            <view class="diygw-grid-inner">
              <view class="diygw-grid-icon diygw-avatar radius diy-icon-home" style=""> </view>
              <view class="diygw-grid-title"> <!-- 页面跳转 -->
                首页
                <!-- <navigator url="index" hover-class="navigator-hover">首页</navigator> -->
              </view>
            </view>
          </navigator>
        </button>
        <button class="diygw-action">
          <navigator url="../article/article" open-type="redirect" hover-class="other-navigator-hover">
            <view class="diygw-grid-inner">
              <view class="diygw-grid-icon diygw-avatar radius diy-icon-discover" style="">
                <!-- <view class="diygw-tag badge empty bar-badge-3 red"></view> -->
              </view>
              <view class="diygw-grid-title"> 社区 </view>
            </view>
          </navigator>
        </button>
        <button class="diygw-action">
          <navigator url="../send" open-type="redirect" hover-class="other-navigator-hover">
            <view class="diygw-grid-inner">
              <view class="diygw-grid-icon diygw-avatar radius diy-icon-cameraadd" style=""> </view>
              <view class="diygw-grid-title">
                发动态
              </view>
            </view>
          </navigator>
        </button>
        <button class="diygw-action">
          <navigator url="../message/message" open-type="redirect" hover-class="other-navigator-hover">
            <view class="diygw-grid-inner">
              <view class="diygw-grid-icon diygw-avatar radius diy-icon-mark">
                <view class="diygw-tag badge bar-badge-1 gradual-green"> 1 </view>
              </view>
              <view class="diygw-grid-title">
                消息
              </view>
            </view>
          </navigator>
        </button>
        <button class="diygw-action">
          <view class="diygw-grid-inner">
            <view class="diygw-grid-icon diygw-avatar radius diy-icon-people" style="color: #22a601">
              <!-- <view class="diygw-tag badge empty bar-badge-4 red"></view> -->
            </view>
            <view class="diygw-grid-title"> 我的 </view>
          </view>
        </button>
      </view>
    </view>
    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
      <view class="flex flex-wrap diygw-col-24 items-center flex2-clz">
        <image :src="headerUrl" class="diygw-image diygw-col-0 white image-clz"
          style="height: 60px !important; width: 60px !important" mode="widthFix"></image>
        <!-- flex flex-wrap diygw-col-0 flex-direction-column justify-between flex3-clz -->
        <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-between flex3-clz">
          <view class="diygw-col-24 diygw-text-lg"
            style="display: flex; flex-direction: column; justify-content: center;">
            <!--            <navigator v-if="nickName == ''" url="../login/login" open-type="navigateTo"
              hover-class="other-navigator-hover" style="padding-top: 5vw;">
              点击登陆
            </navigator> -->
            <!-- margin-top: 20vh; -->
            <text @click="open()" v-if="nickName == ''" style="">
              <!-- 未登陆,点击登陆进行跳转到登陆页面-->
              点击登陆
            </text>
            <view v-else>
              <text class="nickName-text">{{nickName}}</text> <!-- 已经登陆,显示昵称 -->
              <button @click="logout()" class="logout-btn">退出登陆</button>
            </view>


          </view>
          <view class="flex diygw-col-0 items-center flex-nowrap flex4-clz">
            <view class="diygw-col-0 text3-clz"> </view>
          </view>
        </view>
      </view>
      <view class="flex flex-wrap diygw-col-24 flex-direction-column white flex5-clz">
        <view class="diygw-title flex diygw-col-24">
          <view class="title font-normal"> 我的咨询 </view>
          <view class="more">
            <text class="diy-icon-right"></text>
          </view>
        </view>
        <view class="flex diygw-col-24">
          <view class="diygw-grid col-3" style="flex-wrap: nowrap;">
            <view class="diygw-grid-item">
              <view class="diygw-grid-inner">
                <view class="diygw-grid-icon diygw-avatar radius-xl">
                  <image mode="aspectFit" class="diygw-avatar-img radius-xl" src="/static/icon1_hb.png"></image>
                </view>
                <view class="diygw-grid-title"> 待付款 </view>
              </view>
            </view>
            <view class="diygw-grid-item">
              <view class="diygw-grid-inner">
                <view class="diygw-grid-icon diygw-avatar radius-xl">
                  <image mode="aspectFit" class="diygw-avatar-img radius-xl" src="/static/icon1_yhq.png"></image>
                </view>
                <view class="diygw-grid-title"> 待使用 </view>
              </view>
            </view>
            <view class="diygw-grid-item">
              <view class="diygw-grid-inner">
                <view class="diygw-grid-icon diygw-avatar radius-xl">
                  <image mode="aspectFit" class="diygw-avatar-img radius-xl" src="/static/icon1_pl.png"></image>
                </view>
                <view class="diygw-grid-title"> 待评价 </view>
              </view>
            </view>
            <view class="diygw-grid-item">
              <view class="diygw-grid-inner" @click="tz()">
                <view class="diygw-grid-icon diygw-avatar radius-xl">
                  <image mode="aspectFit" class="diygw-avatar-img radius-xl" src="/static/shenhe.png"></image>
                </view>
                <view class="diygw-grid-title"> 申请成为咨询师 </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
      <view class="flex diygw-col-24 items-center flex-nowrap flex6-clz">
        <image src="/static/icon1_gw.png" class="diygw-image diygw-col-0"
          style="height: 30px !important; width: 30px !important" mode="widthFix"></image>
        <view class="diygw-col-0 text1-clz"> 我的咨询 </view>
        <text class="flex icon diygw-col-0 icon-clz diy-icon-right"></text>
      </view>
      <view class="flex diygw-col-24 items-center flex-nowrap flex7-clz">
        <image src="/static/icon1_tz.png" class="diygw-image diygw-col-0"
          style="height: 30px !important; width: 30px !important" mode="widthFix"></image>
        <view class="diygw-col-0 text4-clz"> 消息通知 </view>
        <view class="diygw-col-0 text5-clz"> 99 </view>
        <text class="flex icon2 diygw-col-0 icon2-clz diy-icon-right"></text>
      </view>
      <view class="flex diygw-col-24 items-center flex-nowrap flex8-clz">
        <image src="/static/icon1_sz1.png" class="diygw-image diygw-col-0"
          style="height: 30px !important; width: 30px !important" mode="widthFix"></image>
        <view class="diygw-col-0 text6-clz"> 我的收藏 </view>
        <text class="flex icon3 diygw-col-0 icon3-clz diy-icon-right"></text>
      </view>
      <!--      <view class="flex diygw-col-24 items-center flex-nowrap flex10-clz">
        <image src="/static/icon1_kf.png" class="diygw-image diygw-col-0"
          style="height: 30px !important; width: 30px !important" mode="widthFix"></image>
        <view class="diygw-col-0 text9-clz"> 在线客服 </view>
        <view class="diygw-col-0 text10-clz"> 人工客服时间 9:00-22:00 </view>
        <text class="flex icon5 diygw-col-0 icon5-clz diy-icon-right"></text>
      </view> -->
      <view class="flex diygw-col-24 items-center flex-nowrap flex11-clz">
        <image src="/static/icon1_sz11.png" class="diygw-image diygw-col-0"
          style="height: 30px !important; width: 30px !important" mode="widthFix"></image>
        <view class="diygw-col-0 text11-clz"> 设置 </view>
        <text class="flex icon6 diygw-col-0 icon6-clz diy-icon-right"></text>
      </view>
    </view>



    <view class="clearfix"></view>

    <!-- 底部弹窗选择登陆方式-->
    <view>
      <u-popup :show="show" mode="bottom" @close="close" @open="open">
        <u-loading-icon v-if="loading" text="登陆中..." textSize="18"></u-loading-icon>
        <!--        <view @click="login()" class="popupView">
          微信一键登陆
        </view> -->
        <v-list>
          <u-cell icon="chrome-circle-fill" title="微信一键登陆" value="微信一键登陆" :arrow="true" @click="login()"></u-cell>
          <u-cell icon="chrome-circle-fill" title="微信注册" value="微信注册" :arrow="true" @click="toLogin()"></u-cell>
          <u-cell icon="chrome-circle-fill" title="账号密码登陆/注册" value="账号密码登陆/注册" :arrow="true"
            @click="toLoginIndex()"></u-cell>
          <view style="height: 5vw;"></view>
        </v-list>
      </u-popup>
    </view>

  </view>


</template>

<script>
  import tabbar1 from "../../components/com/com-tabbar.vue"
  export default {
    components: {
      tabbar1
    },
    data() {
      return {
        show: false, //底部选择框状态 
        loading: false,
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        nickName: '', //昵称
        headerUrl: '', //头像
        user: {
          userName: '',
          password: ''
        }
      };
    },
    created() {
      //判断用户是否登陆,并验证token是否无效或者过期
      this.hello();
    },
    onShow() {
      // this.setCurrentPage(this);
    },
    onLoad(option) {
      this.init();
    },
    methods: {
      async init() {},
      close() {
        this.show = false;
      },
      open() {
        console.log("open");
        this.show = true;
      },
      tz() {
        uni.navigateTo({
          // '/pages/bookDetail/bookDetail?id='
          // console.log(detail),
          url: "/pages/examine/examine",
        })
      },
      toLogin() { //微信注册登陆
        uni.navigateTo({
          url: '../login/login'
        });
      },
      toLoginIndex() { //账号密码登陆注册
        uni.navigateTo({
          url: '../login/loginIndex'
        });
      },
      login() {
        this.loading = true;
        let that = this;
        uni.login({
          "provider": "weixin",
          "onlyAuthorize": true, // 微信登录仅请求授权认证
          success: function(event) {
            const {
              code
            } = event
            //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
            console.log(event.code)
            uni.request({
              url: 'http://127.0.0.1:800/mhs/user/loginByWeixin', //后端登陆接口
              data: {
                code: event.code
              },
              success: (res) => {
                if (res.data.code == 1) {
                  //获得token完成登录,并将token存入本地缓存
                  uni.setStorageSync('token', res.data.data.token);
                  //存入user
                  uni.setStorageSync('loginUser', res.data.data.loginUser);
				          that.$websocket.commit('setUid',res.data.data.loginUser.id);
                  that.$websocket.commit('webSocketInit', res.data.data.loginUser.id);

                  that.loading = false;
                  that.close(); //关闭弹窗
                  uni.reLaunch({
                    url: '../user/user'
                  });
                }
              }
            });
          },
          fail: function(err) {
            this.loading = false;
            uni.showToast({
              title: '登陆失败',
              duration: 2000,
              mask: true //是否有透明蒙层，默认为false 
            })
            // 登录授权失败  
            // err.code是错误码
          }
        })
      },
      logout() { //退出登陆
        //1 发送退出登陆请求
        uni.request({
          url: 'http://127.0.0.1:800/mhs/user/logout',
          method: 'GET',
          header: {
            'content-type': 'application/json',
            'token': uni.getStorageSync('token') // 需要携带token
          },
          success: (res) => {
            if (res.data.code == 1) {
              //2 清除本地token
              uni.removeStorageSync('token');
              uni.removeStorageSync('loginUser');
              //退出websocket
              // this.$websocket.()
              this.nickName = '';
              this.headerUrl = '';
              //3 提示信息
              uni.showToast({
                title: '退出成功',
                duration: 1000,
                mask: true //是否有透明蒙层，默认为false 
              })
            }
          }
        })
      },
      hello() { //测试携带token是否过期
        //获取当前登陆的用户
        let loginUser = uni.getStorageSync('loginUser');
        if (loginUser == null || loginUser == '') { //用户为登陆,无需验证token
          this.nickName = '';
          return;
        }
        //进行token验证
        uni.request({
          url: 'http://127.0.0.1:800/mhs/user/hello',
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          success: (res) => {
            if (res.data == 'hello') {
              this.nickName = loginUser.nickName;
              this.headerUrl = loginUser.avatar;
            } else { //用户未登录或者token过期
              uni.removeStorageSync('token');
              uni.removeStorageSync('loginUser');
              uni.showToast({
                title: 'token已过期,请重新登陆',
                icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                duration: 4000 //持续时间为 2秒
              })
            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../common/diygw-ui/iconfont.scss';
  @import '../../common/diygw-ui/animate.css';
  @import '../../common/diygw-ui/index.scss';

  .popupView {
    height: 20vw;

  }

  .bar-badge-1 {
    padding-left: 0px;
    padding-right: 0px;
    right: -9px;
    top: -2px;
  }

  .bar-badge-3 {
    padding-left: 0px;
    padding-right: 0px;
    right: -7px;
    top: -2px;
  }

  .bar-badge-4 {
    padding-left: 0px;
    padding-right: 0px;
    right: -1px;
    top: -2px;
  }

  .flex1-clz {
    z-index: 100;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/static/82.png);
    background-position: top right;
  }

  .flex2-clz {
    margin-left: 5px;
    z-index: 100;
    width: calc(100% - 5px - 5px) !important;
    margin-top: 35px;
    margin-bottom: 20px;
    margin-right: 5px;
  }

  .image-clz {
    flex-shrink: 0;
    border-bottom-left-radius: 50%;
    overflow: hidden;
    width: 60px !important;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 60px !important;
  }

  .flex3-clz {
    margin-left: 5px;
    z-index: 100;
    color: #ffffff;
    flex: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 5px;
  }

  .flex4-clz {
    z-index: 100;
  }

  .text3-clz {
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
  }

  .flex5-clz {
    padding-top: 10px;
    border-bottom-left-radius: 10px;
    z-index: 100;
    padding-left: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    box-shadow: 1px 1px 3px 1px rgba(154, 154, 154, 0.37);
    overflow: hidden;
    width: calc(100% - 10px - 10px) !important;
    border-top-left-radius: 10px;
    margin-top: 0px;
    border-bottom-right-radius: 10px;
    margin-bottom: 10px;
    padding-right: 10px;
  }

  .flex6-clz {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 10px;
  }

  .text1-clz {
    padding-top: 0px;
    font-weight: bold;
    flex: 1;
    padding-left: 5px;
    font-size: 16px !important;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .icon-clz {
    color: #939393;
  }

  .icon {
    font-size: 14px;
  }

  .flex7-clz {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 10px;
  }

  .text4-clz {
    padding-top: 0px;
    font-weight: bold;
    flex: 1;
    padding-left: 5px;
    font-size: 16px !important;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .text5-clz {
    color: #fd6b03;
    font-size: 16px !important;
  }

  .icon2-clz {
    color: #939393;
  }

  .icon2 {
    font-size: 14px;
  }

  .flex8-clz {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 10px;
  }

  .text6-clz {
    padding-top: 0px;
    font-weight: bold;
    flex: 1;
    padding-left: 5px;
    font-size: 16px !important;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .icon3-clz {
    color: #939393;
  }

  .icon3 {
    font-size: 14px;
  }

  .flex10-clz {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 10px;
  }

  .text9-clz {
    padding-top: 0px;
    font-weight: bold;
    padding-left: 5px;
    font-size: 16px !important;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .text10-clz {
    padding-top: 0px;
    color: #939393;
    flex: 1;
    padding-left: 5px;
    padding-bottom: 0px;
    padding-right: 5px;
  }

  .icon5-clz {
    color: #939393;
  }

  .icon5 {
    font-size: 14px;
  }

  .flex11-clz {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2;
    padding-right: 10px;
  }

  .text11-clz {
    padding-top: 0px;
    font-weight: bold;
    flex: 1;
    padding-left: 5px;
    font-size: 16px !important;
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .icon6-clz {
    color: #939393;
  }

  .icon6 {
    font-size: 14px;
  }

  .container18836 {
    padding-left: 0px;
    padding-right: 0px;

    font-size: 12px;
  }

  .container18836 {
    padding-bottom: 80px;
  }

  .logout-btn {
    float: right;
  }

  .nickName-text {
    padding-top: 10vw;
    padding-left: 3vw;
  }
</style>